<template>
  <el-dialog
    v-model="visible"
    width="900px"
    :title="dialogSelectPerson.title"
    draggable
    :close-delay="200"
    @close="closeDialog"
		close-icon="CloseBold"
	>
    <div class="app-container">
      <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery"
              ><i-ep-search />搜索</el-button
            >
            <el-button @click="resetQuery">
              <i-ep-refresh />
              重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

        <el-table
          v-loading="loading"
          :data="tableList"
          highlight-current-row
          border
          height="200"
        >
          <el-table-column
						label="序号"
            type="index"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            key="groupName"
            label="班组名称"
            align="center"
            prop="groupName"
            width="160"
          />
          <el-table-column
            key="personName"
            label="人员名称"
            align="center"
            prop="personName"
            width="160"
          />
          <el-table-column
            key="typeName"
            label="当前工种"
            align="center"
            width="160"
            prop="typeName"
          >
          </el-table-column>
          <el-table-column
            key="roleName"
            label="工人类型"
            align="center"
            width="160"
            prop="roleName"
          >
          </el-table-column>
          <el-table-column
            key="statusName"
            label="状态"
            align="center"
            width="160"
            prop="statusName"
          >
						<template #default="scope">
							<el-tag
								:type="
                scope.row.status === 1 ? '' : 'info'
              "
							>{{ scope.row.statusName }}</el-tag
							>
						</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="">
            <template #default="scope">
              <el-button type="" size="small" @click="select(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageIndex"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery"
        />
<!--      </el-card>-->
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw } from "vue";
import { getDicts } from "@/store/modules/dict";
import { selectAllMemberList, ParamsType } from "@/api/admin/project/types.ts";
import {getGroupMember} from "@/api/admin/project";

const emit = defineEmits(["personSendClose"]);
const instance = getCurrentInstance();
let { proxy, ctx } = instance;
const props = defineProps({
  dialogSelectPerson: {
    type: Object,
    default: () => ({
      visible: false,
      title: "选择人员",
      id: 0,
      corpId: 0,
    }),
  },
});
const visible = ref(props.dialogSelectPerson.visible);
let loading = ref(false);

const queryFormRef = ref<ElForm>();
const tableList = ref<selectAllMemberList[]>();
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});
let total = ref(0);

/* 发送关闭信息并返回选择信息 */
function personSendClose(personInfo,query) {
  emit("personSendClose", personInfo,query);
}

/* 选择人员 */
function select(personInfo) {
  closeDialog(personInfo,true)
}

/**
 * 关闭弹窗
 */
function closeDialog(personInfo,query) {
  visible.value = false;
  personSendClose(personInfo,query);
}

/**
 * 重置表单
 */
function resetForm() {
  queryFormRef.value.resetFields();
  queryFormRef.value.clearValidate();
}

/* 列表查询 */
async function handleQuery() {
	loading.value = true;
  let list = await getGroupMember(queryParams);
  if (list.type === 0) {
    if (list.success) {
			tableList.value = list.data.list;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
	loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

onMounted(() => {
  handleQuery();
});

onUnmounted(() => {
});
</script>

<style lang="less" scoped>
.app-container{
  padding: 0px;
}
</style>
